<template>
  <div class="order-detail app-container">
    <div class="order-info">
      <h3>订单编号：{{ data?.orderSn }}</h3>
      <el-descriptions column="2">
        <el-descriptions-item label="下单时间:">{{ data?.createTime }}</el-descriptions-item>
        <el-descriptions-item label="用户名称:">{{ data?.nickName }}</el-descriptions-item>
        <el-descriptions-item label="支付时间:">
          {{ data?.payTime }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式:">{{ data?.mobile }} </el-descriptions-item>
        <el-descriptions-item label="销售类型:">
          <dict-tag
            class="inline-block"
            :options="shopping_sale_type"
            :value="data?.mallProductType"
          />
        </el-descriptions-item>
        <el-descriptions-item label="所在城市:"> {{ data?.cityName }}</el-descriptions-item>
        <el-descriptions-item label="快递单号:" span="3">
          {{ data?.logisticsSn }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const { order_product_status, shopping_sale_type } = proxy.useDict(
  'order_product_status',
  'shopping_sale_type'
)
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #fff;
}
.order-detail {
  min-width: 900px;
  display: flex;
  justify-content: space-between;
  .order-info {
    width: 900px;
  }
  .order-stat {
    width: 4em;
    > div {
      width: 1.1em;
      line-height: 2;
      font-weight: bold;
      font-size: 24px;
      color: #fff;
    }
  }
}
</style>
